<template>
  <view class="shop_box">
    <view class="shop_list_item">
      <view v-if="items.picture" style="position: relative">
        <image :src="items.picture" :lazy-load="true"></image>
        <!--<image style="position: absolute;top: 0;left: 0;width: 56rpx;height: 32rpx;border-radius: 0"
               :src="imgurlBwc + 'feast/gf_icon.png'"></image>-->
        <!--<view class="gf_icon">官返</view>-->
      </view>
      <image v-else
             src="https://img.alicdn.com/imgextra/i3/3829152210/O1CN01gKAL671SCE3PjsESI_!!3829152210.png"
             style="border-radius: 20rpx;"></image>
      <view class="shop_info">
        <view class="shop_mingzi">
          <view class="shop_type">美团</view>
          <view :class="items.count == 0?'width':''" class="shop_name ellipsis-two-line">{{ items.name }}</view>
        </view>
        <view class="yysjandejuli_box">
          <view class="yysj_text">配送时长：{{ items.deliveryTimeTip }}</view>
          <view class="shop_juli">距您：{{ items.deliveryDistance || '0km' }}</view>
        </view>
      </view>
    </view>
    <view v-for="(aitem, aindex) in items.planActivityInfoList" :key="aindex" class="active_box"
          @click="handleShopDetailActive(items,aitem,aindex)">
      <view class="a_title">
        <!--<text class="activity" style="padding: 6rpx 12rpx;margin-right: 10rpx">活动{{ aindex + 1 }}</text>-->
        <view style="display: flex;flex: 1;">
          <view v-if="aitem.planActivityType == 2" style="padding: 10rpx 20rpx;border-radius: 8rpx;background: #FECC32;">
            <image class="money_bg"
                   style="width: 112rpx;height: 30rpx;"
                   :src="imgurlBwc + 'feast/try_eat2.png'" ></image>
          </view>
          <view v-else style="padding: 6rpx 20rpx;border-radius: 8rpx;background: #FECC32;">
            <image class="money_bg"
                   style="width: 92rpx;height: 38rpx;"
                   :src="imgurlBwc + 'feast/super2.png'" ></image>
          </view>
          <view v-if="aitem.planActivityType == 2" :class="aitem.day_num<=aitem.total_count?'hui':''" class="pj_text">
            无需评价
          </view>
          <view v-if="aitem.planActivityType == 1" :class="aitem.day_num<=aitem.total_count?'hui':''" class="pj_text">
            需评价
          </view>
        </view>
        <view style="width: 130rpx;color: #666666;font-size: 26rpx;text-align: right;">
          还剩<text style="color:#FF5528;">{{ aitem.inventory }}</text>份
        </view>


        <!--        <text class="no_pay_rul"-->
        <!--              style="background-color: #FFF1D6;color: #F9661C;border-radius: 0 5rpx 5rpx 0;padding: 6rpx 12rpx">无实付要求丨秒返-->

        <!--        </text>-->
        <!--        <text class="no_pay_rul" style="background-color: #FFF1D6;color: #F9661C;border-radius: 0 5rpx 5rpx 0;padding: 6rpx 12rpx">秒返</text>-->
      </view>
      <view class="active_btns">
        <view class="left_box">
          <view class="money">
            按实付<text style="color:#FF5528;">{{ aitem.commission.ratio }}%</text>返利
          </view>
          <view :class="aitem.day_num<=aitem.total_count?'hui':''" class="money">
            最高返<text style="color:#FF5528;">{{ aitem.commission.maxCommission }}</text>元
          </view>

        </view>
        <view class="right_box">
          <!--<view v-if="aitem.inventory != 0" class="bl_box">
            <text class="val_num">剩{{ aitem.percent }}%</text>
            <view style="width: 100rpx;border-radius: 20rpx;overflow: hidden">
              <progress :percent="aitem.percent"
                        border-radius="100"
                        duration="16"
                        stroke-width="8"
                        activeColor="#FF8548"
                        backgroundColor="#FFDECE"
                        active="true"/>
            </view>
          </view>-->
          <view v-if="aitem.inventory == 0" class="btn sq_btn">已售罄</view>
          <view v-else class="btn qd_btn">抢单</view>
        </view>
      </view>
      <view v-if="items.planActivityInfoList.length == 2" class="line">
        <view class="u-line"></view>
        <text class="line-text" style="left: -30rpx"></text>
        <text class="line-text" style="right: -30rpx"></text>
      </view>
    </view>
  </view>
</template>

<script>
const app = getApp();
export default {
  name: "WaimaiList",
  props: {
    items: {
      type: Object
    }
  },
  data() {
    return {
      imgurlBwc: app.globalData.imgurlBwc,

    };
  },
  created() {

  },
  methods: {
// 点击活动跳转到店铺详情对应显示活动
    handleShopDetailActive(item, aitem, Index){
      if (aitem.percent === 0 || aitem.inventory === 0) {
        uni.showToast({
          title: '已售罄',
          icon: 'none'
        })
        return
      } else {
        uni.navigateTo({
          url: '/subpackageA/pages/feast-shopdetail/feast-shopdetail?&data=' + encodeURIComponent(JSON.stringify(item)) + '&index=' + Index,
          events: {
            // 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
            acceptDataFromOpenedPage: function (data) {
              console.log(data)
            },
            someEvent: function (data) {
              console.log(data)
              emits('changeShop', data)
            }
          },
          success: function (res) {
            // 通过eventChannel向被打开页面传送数据
            res.eventChannel.emit('item', item)
          }
        })
      }
    }
  }
}
</script>

<style lang="scss">
.shop_box{
  background: #FFFFFF;
  border-radius: 32rpx;
  margin-bottom: 20rpx;
}
.no_pay_rul {
  background-color: #FFF1D6;
  color: #F9661C;
  border-radius: 0 5rpx 5rpx 0;
}

.shop_list_item {
  background-color: #ffffff;
  border-radius: 20rpx;
  padding: 20rpx 20rpx;
  display: flex;
  position: relative;

  .shouwanTag {
    position: absolute;
    right: 0;
    top: 0;
    background-color: #F97632;
    height: 54rpx;
    font-size: 24rpx;
    width: 110rpx;
    color: #fff;
    line-height: 54rpx;
    text-align: center;
    border-radius: 0 20rpx 0 20rpx;
  }

  image {
    width: 128rpx;
    height: 128rpx;
    border-radius: 16rpx;
  }

  .shop_name {
    padding-left: 10rpx;
    word-break: break-all;
    display: -webkit-box;
    // -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-weight: bold;
    flex: 1;
    font-size: 28rpx;
    min-height: 68rpx;

    &.width {
      width: 70%;
      flex: unset;
    }
  }

  .shop_info {
    flex: 1;
    padding-left: 14rpx;

    .shop_mingzi {
      display: flex;
      justify-content: space-between;
      margin-bottom: 10rpx;

      .shop_type {
        background-color: #fecc32;
        color: #333;
        border-radius: 8rpx;
        font-size: 24rpx;
        text-align: center;
        padding: 0 6rpx;
        height: 36rpx;
        line-height: 36rpx ;
      }

      .elemtag {
        background-color: #17aeff;
        color: #ffffff;
        border-radius: 8rpx;
        font-size: 24rpx;
        text-align: center;
        padding: 2rpx 10rpx;
      }

      .shop_juli {
        color: #555555;
        //padding-left: 20rpx;
        font-size: 24rpx;
        text-align: right;
      }
    }

    .yysjandejuli_box {
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 24rpx;
      margin: 0 0 20rpx;

      .yysj_text {
        background-color: #F6F6F6;
        border-radius: 8rpx;
        padding: 8rpx 13rpx;
        font-size: 24rpx;
        text-align: center;
        color: #666666;
      }

    }

    .shop_yuliang {
      display: flex;
      align-items: center;
      margin-top: -10rpx;

      .jindutiao {
        flex: 1;
        margin-top: -18rpx;
      }

      .shengyu {
        padding-left: 20rpx;
        color: #FF6433;
        font-size: 24rpx;
      }
    }
  }
  .gf_icon{
    width: 70rpx;
    text-align: center;
    padding: 0 6rpx;
    font-size: 24rpx;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
    border-radius: 12rpx 0 10rpx 0;
    background: #fecc32;
  }
}

.active_box {
  border-radius: 10rpx;
  width: 95%;
  margin: 0 auto;
  box-sizing: border-box;
  padding-bottom: 20rpx;
  align-items: center;
  justify-content: center;

  .a_title {
    font-size: 22rpx;
    color: #666;
    border-radius: 3px;
    position: relative;
    display: flex;
    justify-content: space-between;
    .title_text {
      background-color: #F1F1F1;
      box-sizing: border-box;
      padding: 0 10rpx;
      position: relative;
      z-index: 11;
    }
    .pj_text {
      background: #FFEFDE;
      border-radius: 40rpx;
      color: #FF7419;
      box-sizing: border-box;
      padding: 0 20rpx;
      font-size: 24rpx;
      height: 25px;
      line-height: 25px;
      margin-left: 10rpx;
      &.hui {
        background: #EFEFEF;
        border: 1px solid #DEDEDE;
        color: #666;
      }
    }
  }
  .line {
    width: 100%;
    height: 28rpx;
    z-index: 1;
    flex: 1;
    position: relative;
    margin-top: 20rpx;
    .line-text{
      width: 28rpx;
      height: 28rpx;
      border-radius: 50%;
      background: #F4F4F4;
      position: absolute;
    }
    .u-line{
      position: absolute;
      left: 0;
      right: 0;
      top: 50%;
      height: 0rpx;
      transform: scaleY(0.5);
      border-bottom: 1rpx dashed #D8D8D8;
    }
  }

  .active_btns {
    display: flex;
    justify-content: space-between;
    margin-top: 20rpx;

    .left_box {
      display: flex;

      .money {
        border-radius: 3px;
        box-sizing: border-box;
        padding: 0 10rpx;
        font-size: 28rpx;
        color: #3D3D3D;
        height: 25px;
        line-height: 25px;

        &.hui {
          background: #C8C8C8;
        }
      }


    }

    .right_box {
      flex: 1;
      display: flex;
      justify-content: flex-end;

      .btn {
        border-radius: 36rpx;
        font-size: 24rpx;
        color: #fff;
        font-weight: bold;
        margin-left: 10rpx;
        height: 25px;
        line-height: 25px;
        display: flex;
        align-items: center;
        box-sizing: border-box;
        padding: 0 20rpx;

        &.qd_btn {
          background: linear-gradient( 270deg, #FF7F14 0%, #FF5429 100%);

          &:before {
            content: '';
            display: inline-block;
            width: 20rpx;
            height: 30rpx;
            background: url('https://lsz.lszbg.com/imgs/images/sd_icon.png') no-repeat center center / 100% 100%;
            margin-right: 5rpx;
          }
        }

        &.opacity {
          opacity: .7;
          font-weight: normal;

          &:before {
            display: none;
          }
        }

        &.sq_btn {
          background: linear-gradient(to left, #BFBFBF, #C8C8C8);
        }
      }
    }
  }

  .active_con {
    border-radius: 10rpx;
    display: flex;
    justify-content: space-between;
    box-sizing: border-box;
    padding: 20rpx;
    align-items: center;
    background: url('https://lsz.lszbg.com/imgs/old/bg_order.png') no-repeat center center / 100% 100%;
    flex: 1;

    &.hui {
      background: url('https://lsz.lszbg.com/imgs/old/bg_order_hui.png') no-repeat center center / 100% 100%;

      .left_a {
        display: flex;
        align-items: center;

        .j_money {
          font-weight: bold;
          margin-right: 20rpx;

          .icon {
            font-size: 28rpx;
            color: #888;
          }

          .val {
            font-size: 48rpx;
            color: #888;
          }
        }

        .vip_no_yes {
          .yes_vip {
            font-size: 24rpx;
            color: #888;
            font-weight: bold;
          }

          .no_vip {
            font-size: 20rpx;
            color: #888;
            margin-top: 5rpx;
          }
        }
      }
    }

    &.opcity {
      opacity: .7;
    }

    .left_a {
      display: flex;
      align-items: center;

      .j_money {
        font-weight: bold;
        margin-right: 20rpx;

        .icon {
          font-size: 28rpx;
          color: #FE874B;
        }

        .val {
          font-size: 48rpx;
          color: #FE5414;
        }
      }

      .vip_no_yes {
        .yes_vip {
          font-size: 24rpx;
          color: #FE5414;
          font-weight: bold;
        }

        .no_vip {
          font-size: 20rpx;
          color: #FE5414;
          margin-top: 5rpx;
        }
      }
    }

    .right_a {
      width: 50%;
      position: relative;

      .r_con {
        position: relative;
        z-index: 111;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        right: -36rpx;

        .lj_qd {
          font-size: 24rpx;
          color: #fff;
          margin-bottom: 10rpx;
        }

      }
    }
  }
}
.active_box:last-child .line{
  display: none;
}
.bl_box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  margin-top: 4rpx;

  .val_num {
    font-size: 22rpx;
    color: #FF8548;
    margin-left: 10rpx;
    margin-top: -2px;
    width: 86rpx;
  }

  .time_text {
    color: #FC7532;
    font-size: 26rpx;
  }
}
</style>